<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description"
	content="easyui help you build your web page easily!">
<title>用户注册</title>
<link rel="stylesheet" type="text/css"
	href="http://www.w3cschool.cc/try/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="http://www.w3cschool.cc/try/jeasyui/themes/icon.css">
<style type="text/css">
body {
	font: 14px/28px "微软雅黑";
}

.contact *:focus {
	outline: none;
}

.contact {
	width: 700px;
	height: auto;
	background: #f6f6f6;
	margin: 40px auto;
	padding: 10px;
}

.contact ul {
	width: 650px;
	margin: 0 auto;
}

.contact ul li {
	border-bottom: 1px solid #dfdfdf;
	list-style: none;
	padding: 12px;
}

.contact ul li label {
	width: 120px;
	display: inline-block;
	float: left;
}

.contact ul li input[type=text], .contact ul li input[type=password] {
	width: 220px;
	height: 25px;
	border: 1px solid #aaa;
	padding: 3px 8px;
	border-radius: 5px;
}

.contact ul li input:focus {
	border-color: #c00;
}

.contact ul li input[type=text] {
	transition: padding .25s;
	-o-transition: padding .25s;
	-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
}

.contact ul li input[type=password] {
	transition: padding .25s;
	-o-transition: padding .25s;
	-moz-transition: padding .25s;
	-webkit-transition: padding .25s;
}

.contact ul li input:focus {
	padding-right: 70px;
}

.btn {
	position: relative;
	left: 300px;
}

.tips {
	color: rgba(0, 0, 0, 0.5);
	padding-left: 10px;
}

.tips_true, .tips_false {
	padding-left: 10px;
}

.tips_true {
	color: green;
}

.tips_false {
	color: red;
}
</style>
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script
	src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script
	src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script
	src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>

<body>
	<h1>
		<font color="red">${errorMessage}</font>
	</h1>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
			    <h3>
				   文献管理系统注册页面
			    </h3>
			</div>
		</div>
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="row clearfix">
					<div class="col-md-4 column"></div>
					<div class="col-md-4 column">
						<div class="contact">
							<form name="form1" method="post">
								<ul>
									<li><label>账号：</label> <input type="text" name="User_Count"
										placeholder="请输入用户名" onblur="checkna()" required /></li>
									<li><label>姓名：</label> <input type="text" name="Username"
										placeholder="请输入用户名" onblur="checkna()" required /></li>
									<li><label>密码：</label> <input type="password"
										name="User_password" placeholder="请输入你的密码" onBlur="checkpsd1()"
										required /></li>
									<li><label>确认密码：</label> <input type="password"
										name="User_password1" placeholder="请再次输入你的密码" onBlur="checkpsd2()"
										required /><span class="tips" id="divpassword2">两次密码需要相同</span>
									</li>
									<li><label>电子邮箱：</label> <input type="email"
										name="Mail" placeholder="请输入你的邮箱" 
										required /></li>
									<li><label>用户角色：</label> 
									    <input  type="radio" name="User_Character"/>普通用户 &nbsp  &nbsp
									    <input type="radio" name="User_Character"/>管理员
									</li>
								</ul>
								<b class="btn"><button type="submit" class="btn btn-info btn-sm">注册</button>  </b>
							</form>
						</div>
						<div style="text-align: center;"></div>
					</div>
					<div class="col-md-4 column"></div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	
		//验证确认密码 
		function checkpsd2(){ 
				if(form1.User_password.value!=form1.User_password1.value) { 
				     divpassword2.innerHTML='<font class="tips_false">您两次输入的密码不一样</font>';
				} else { 
				     divpassword2.innerHTML='<font class="tips_true">输入正确</font>';
				}
		}
  </script>
</body>
</html>